{extend name="base" /}
{block name="body"}
<div class="layui-card">
    <div class="layui-card-body">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li class="layui-this">账号详情</li>
                <li>转码设置</li>
                <li>水印设置</li>
            </ul>
            <div class="layui-tab-content mt30">
                <div class="layui-tab-item layui-show video-count">
                    <div class="layui-row video-count-info-box">
                        <div class="video-count-info ">
                            <div class="ayui-col-xs5 layui-col-sm5 layui-col-md5 left">
                                <div class="label">点播套餐</div>
                                <div class="item">账户类型：{$res['data']['type']|getAccountType}</div>
                                <div class="item">当前服务状态：{$res['data']['status']|getAccountStatus}</div>
                                <div class="item">计费类型：{$res['data']['charge_type']|getAccountCharge}</div>
                            </div>
                            <div class="ayui-col-xs5 layui-col-sm5 layui-col-md5 right layui-col-md-offset1">
                                <div class="item">账号有效期还剩<br><span class="left-day">6</span><span class="unit"> 天</span></div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-row">
                        <span class="item-title">点播套餐用量</span>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-xs6 layui-col-sm6 layui-col-md6 progress-wrapper">
                            <div class="left-content"><label>云点播流量</label><div class="item">本月已用{$videoinfo['used_flow']}</div><div class="item">共计{$videoinfo['month_flow_limit']}(流量)</div><div class="button detail-btn">查看历史用量明细</div></div>
                            <div class="progress">
                                <div class="left-alloc">{$videoinfo['remainder_flow']}<br>剩余流量</div>
                                <div class="alloc-summary-graph" id="video-graph"></div>
                                <div class="line"></div>
                            </div>
                        </div>
                        <div class="layui-col-xs6 layui-col-sm6 layui-col-md6 progress-wrapper">
                            <div class="left-content"><label>云点播存储</label><div class="item">共计已用{$videoinfo['used_storage']}</div><div class="item">共计{$videoinfo['total_storage']} (存储)</div><div class="button detail-btn">查看历史用量明细</div></div>
                            <div class="progress">
                                <div class="left-alloc">{$videoinfo['remainder_storage']}<br>剩余存储</div>
                                <div class="alloc-summary-graph" id="live-graph"></div></div>
                        </div>
                    </div>
                    <div class="layui-row">
                        <span class="item-title">流量概况</span>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 flow-box">
                            <div class="flow" id="flow">流量概况</div>
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item">

                </div>
                <div class="layui-tab-item">

                </div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="js"}
<script src="__COMMON__/echarts.min.js"></script>
<script>
    var myChart = echarts.init(document.getElementById('video-graph'));
    var option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        series: [
            {
                name:'流量使用',
                type:'pie',
                radius: ['50%', '60%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: false,
                        textStyle: {
                            fontSize: '20',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:[
                    {value:{$videoinfo_nom['used_flow']}, name:'已用流量'},
                    {value:{$videoinfo_nom['remainder_flow']}, name:'剩余流量'},
                ],
                color:['#1c7fff', '#ccc']
            }
        ]
    };
    myChart.setOption(option);
</script>
<script>
    var myChart = echarts.init(document.getElementById('live-graph'));
    var option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        series: [
            {
                name:'存储使用',
                type:'pie',
                radius: ['50%', '60%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: false,
                        textStyle: {
                            fontSize: '20',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:[
                    {value:{$videoinfo_nom['used_storage']}, name:'已用存储'},
                    {value:{$videoinfo_nom['remainder_storage']}, name:'剩余存储'},
                ],
                color:['#1c7fff', '#ccc']
            }
        ]
    };
    myChart.setOption(option);
</script>
<script>
    var myChart = echarts.init(document.getElementById('flow'));
    var option = {
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: {$time}
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: {$videoflow},
            type: 'line',
            areaStyle: {
                normal: {
                    color: '#1c7fff'
                }
            },
            itemStyle : {
                normal : {
                    color:'#1c7fff',
                    lineStyle:{
                        color:'#1c7fff'
                    }
                }
            }}
        ]
    };
    myChart.setOption(option);
</script>
{/block}